<template>
   <div class="w-full h-full min-h-screen box-border relative">  
    <van-nav-bar 
      left-arrow 
      :title="$t('pageTitle.tradeRecords')" 
      @click-left="router.back()" 
      safe-area-inset-top 
    />
    <van-pull-refresh v-model="refresh" @refresh="handleRefresh">
      <van-empty
        v-if="!list.length && !loading"
        image-size="100"
        :description="$t('noData')"
      />
      <van-list 
        v-else
        v-model:loading="loading" 
        :finished="finished" 
        @load="handleLoad"
      >
      <van-cell-group v-for="item in list">
          <van-cell :border="false">
            <template #title>
              <van-row justify="start" align="center" class="text-center text-[12px] text-[#8f8f94]">
                <van-col :span="9">
                  <div class="text-left">
                    {{ item.tableId }}
                  </div>
                  <div class="text-left">
                    {{ $t('stage') }}{{ item.periodNo }}
                  </div>
                </van-col>
                <van-col :span="5">
                  {{ item.oddsId === 'RED' ? $t('red') : item.oddsId === 'BLUE' ? $t('blue') : '' }}
                </van-col>
                <van-col :span="5">
                  <div>{{ formatPrice(item.money) }}</div>
                  <div>{{ $t('bettingAmount') }}</div>
                </van-col>
                <van-col :span="5">
                  <div>{{ formatPrice(item.winMoney) }}</div>
                  <div 
                    :class="winStatus.get(item.winStatus) === 'WIN' ? 'text-red-400' : ''"
                  >
                    {{ $t(winStatus.get(item.winStatus)!) }}
                  </div>
                </van-col>
              </van-row>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
    </van-pull-refresh>
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script setup lang="ts">
import { showFailToast } from "vant"

import { useRouter } from "vue-router"

import Decimal from "decimal.js"

import { betOrder } from "@/service/login"

import { winStatus } from "@/utils/enums"

const router = useRouter()

const formatPrice = (price: string) => {
  if(!price) return 
  return new Decimal(price).toFixed(2)
}

const page = ref({
  current: 1,
  size: 10
})

const refresh = ref<boolean>(false)

const finished = ref<boolean>(false)

const loading = ref<boolean>(false)

const list = ref<any[]>([])

const getList = async () => {
  try {
    if(finished.value) return 

    const params = { ...page.value }
    
    const ret = await betOrder(params)

    if(!ret.success) return showFailToast(ret.message)

    loading.value = false
  
    switch(true){
      case refresh.value: 
        list.value = ret.data?.records || []
        break
      default: 
        list.value = [...new Set([...list.value, ...(ret.data ? ret.data?.records : [])])]
        break
    }

    await nextTick()

    if(
      ret.data?.total === 0 || 
      !list.value.length ||
      (list.value.length >= ret.data?.total)
    ) return finished.value = true

    page.value.current++
  } catch(err: any){
    finished.value = true
    refresh.value = false
    loading.value = false
    throw err
  }
}

const handleRefresh = async () => {
  page.value.current = 1
  page.value
  refresh.value = true
  loading.value = true
  finished.value = false
  list.value = []
  await handleLoad()
  refresh.value = false
}

const handleLoad = async () => await getList()

onBeforeMount(() => handleLoad())
</script>

<style lang="less" scoped></style>
